<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>

    <style>
        #app {
            padding: 20px;
        }
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 20px;
            padding: 0 4px;
        }
        .content {
            margin-top: 20px;
        }
        #dtxw .top-left,
        #dtxw .top-right {
            display: inline-block;
            width: 49%;
            font-size: 0
        }
        #dtxw .unpush,
        #dtxw .pushed {
            font-size: 16px;
            display: inline-block;
            border: 1px solid #68cacb;
            border-bottom: none;
            padding: 6px 17px;
            cursor: pointer;
            position: relative;
            left: 1px;
        }
        #dtxw .select {
            background-color: #68cacb;
            color: #fff;
        }
        #dtxw .unpush {
            border-right: 0;
        }
        #dtxw .top-right {
            text-align: right;
        }
        #dtxw .add,.allpush {
            font-size: 16px;
            display: inline-block;
            padding: 4px 10px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            margin-right: 20px;
            cursor: pointer;

        }
        #dtxw table {
            text-align: center;
            width: 100%;
            border: 1px solid #dff2f2;
            border-collapse:collapse;
            border-top: 0;
        }
        #dtxw tr {
            width: 100%;
            font-size: 15px;
        }
        #dtxw tr span {
            cursor: pointer;
        }
        #dtxw tr:nth-child(odd) {
            background-color: #dff2f2;
        }
        #dtxw tr:last-child {
            border-bottom: 0;
        }
        #dtxw th {
            background-color: #68cacb;
            line-height: 39px;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }
        #dtxw td {
            line-height: 39px;
        }
        #dtxw .all {
            width:60px;
            cursor: pointer;
        }
        #dtxw label {
            cursor: pointer;
            margin: 0;
        }
        #dtxw .title {
            width: 40%;
            text-align: left;
            text-indent: 50px;
        }
        #dtxw .time {
            width: 20%;
        }
        #dtxw .operate {
            width: 30%;
        }
        #dtxw .right_cont_container {
            padding: 20px;
        }
        #dtxw .checkbox {
            display: inline-block;
        }
        #dtxw .first {
            position: relative;
            top: 4px;
        }
        .show-show {
            display: inline-block!important;
        }
        .none {
            display: none;
        }
        .show-block {
            display: block!important;
        }
        #demo1,
        #demo2 {
            margin-top: 20px;
        }
        .hasdata {
            text-align: center;
            margin-top: 120px;
            display: none;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>东台资讯</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>健康宣教</span>
                        <span><img src="../img/title-next.png" class="none" :class="{'show-show':nextPagelogo}"></span>
                        <span class="none" :class="{'show-show':nextPagelogo}">{{childPage}}</span>
                    </div>
                    <div class="content none" id="dtxw" :class="{'show-block':listShow}">
                        <div class="top-row">
                            <div class="top-left">
                                <div class="unpush" :class="{'select':unpush}" @click="unpushshow()">未发布</div>
                                <div class="pushed" :class="{'select':!unpush}" @click="pushedshow()">已发布</div>
                            </div>
                            <div class="top-right">
                                <div class="add" @click="add()">添加</div>
                                <div class="allpush" v-if="unpush" @click="groupPush()">批量发布</div>
                            </div>
                        </div>
                        <%--未发布--%><%--未发布--%><%--未发布--%><%--未发布--%><%--未发布--%><%--未发布--%><%--未发布--%>
                        <div class="unpush-box none" :class="{'show-block':unpush}">
                            <table>
                                <tr>
                                    <th class="all" @click="selectAll()">
                                        <input id="quanxuan" type="checkbox" class="checkbox first">
                                        <label for="quanxuan">全选</label>
                                    </th>
                                    <th class="title">标题</th>
                                    <th class="time">创建时间</th>
                                    <th class="operate">操作</th>
                                </tr>
                                <tr v-for="(index,news) in newsList">
                                    <td><input type="checkbox" class="checkbox" :id="news.id"></td>
                                    <td style="text-align:left">{{news.title}}</td>
                                    <td>{{news.time}}</td>
                                    <td><span @click="edit(news.id,index)">修改/</span><span @click="del(news.id,index)">删除/</span><span @click="push(news.id)">发布</span></td>
                                </tr>
                            </table>
                            <%--未发布--%>
                            <div id="demo1"></div>
                        </div>
                        <!--已发布--><!--已发布--><!--已发布--><!--已发布--><!--已发布--><!--已发布--><!--已发布--><!--已发布--><!--已发布-->
                        <div class="pushed-box none" :class="{'show-block':!unpush}">
                            <table>
                                <tr>
                                    <th class="title">标题</th>
                                    <th class="time">创建时间</th>
                                    <th class="operate">操作</th>
                                </tr>
                                <tr v-for="(index,news) in newsList2">
                                    <td style="text-align:left;text-indent:10px">{{news.title}}</td>
                                    <td>{{news.time}}</td>
                                    <td><span @click="edit(news.id,index)">修改/</span><span @click="back(news.id,index)">撤回</span></td>
                                </tr>
                            </table>
                            <%--分页插件=====已发布--%>
                            <div id="demo2"></div>
                        </div>
                    </div>
                    <div class="hasdata" :class="{'show-block':nodata}">
                        <img src="../img/nodata.png">
                        <div>暂时没有数据</div>
                    </div>
                    <addd class="none" :class="{'show-block':addShow}"></addd>
                    <bbbb class="none" :class="{'show-block':editShow}"></bbbb>
                    <dell class="none" :class="{'show-block':delShow}"></dell>
                    <back class="none" :class="{'show-block':backShow}"></back>
                    <push class="none" :class="{'show-block':pushShow}"></push>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
<%@ include file="template-add.jsp"%>
<%@ include file="template-edit.jsp"%>
<%@ include file="template-del.jsp"%>
<%@ include file="template-back.jsp"%>
<%@ include file="template-push.jsp"%>

</html>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            category: "23",          //每个新闻类型的catagory都不一样
            unpush: true,            //当前盒子显示为未推送
            listShow: true,          //显示列表页
            addShow: false,          //显示添加新闻盒子
            editShow: false,         //显示修改新闻盒子
            delShow: false,          //删除新闻盒子
            backShow: false,         //撤回新闻盒子
            pushShow: false,         //推送新闻盒子
            childPage: "",           //下一个页面的标题（最上面一行）
            nextPagelogo: false,     //显示最上面的》这个
            totalPage: "",           //未推送list总页数
            newsList: [],            //未推送list
            totalPage2: "",          //已推送list总页数
            newsList2: [],           //已推送list
            newsId: "",              //当前选中的新闻id
            newsIndex: "",           //当前选中的新闻在列表中的index
            backIndex: "",           //当前选中的新闻在列表中的index，撤回新闻时用得上
            nodata: false
        },
        ready: function() {         //页面初始化，请求未推送列表数据并拼接
            var _this = this;
            //console.log(_this.status);
            $.ajax({
                type: 'POST',
                url: "jkxj.jsp",
                data: {
                    act: "news_list",
                    category: "23",
                    hospital: "1070",
                    page: "1",
                    status: 3,
                    item_count: 10
                },
                success: function (res) {
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        _this.totalPage = res.data.page_count;
                        _this.newsList = res.data.rank;
                        if(_this.newsList.length == 0) {
                            _this.nodata = true;
                        } else {
                            _this.nodata = false;
                        }
                        layui.use(['laypage', 'layer'], function(){
                            var laypage = layui.laypage;
                            layer = layui.layer;
                            laypage({
                                cont: 'demo1',
                                pages: vm.totalPage,
                                groups: 5,
                                jump: function(obj, first){
                                    var curr = obj.curr;
                                    $.ajax({
                                        type: 'POST',
                                        url: "jkxj.jsp",
                                        data: {
                                            act: "news_list",
                                            page: curr + "",
                                            category: "23",
                                            hospital: "1070",
                                            status: 3,
                                            item_count: 10
                                        },
                                        success: function(res) {
                                            //console.log(res);
                                            res = JSON.parse(res);
                                            $('.checkbox')[0].checked = false;
                                            vm.totalPage = res.data.page_count;
                                            vm.newsList = res.data.rank;
                                            if(vm.newsList.length == 0) {
                                                vm.nodata = true;
                                            } else {
                                                vm.nodata = false;
                                            }
                                        }
                                    })
                                }
                            })
                        })
                    }
                }
            })
        },
        methods: {                          //因为笔者比较菜，所以下面有些分页调用时的代码重复了
            unpushshow: function() {        //点击未推送，请求未推送list的数据，赋值给totalpage和newsList中
                var _this = this;
                this.unpush = true;
                //aa('demo1');
                $.ajax({
                    type: 'POST',
                    url: "jkxj.jsp",
                    data: {
                        act: "news_list",
                        category: "23",
                        hospital: "1070",
                        page: "1",
                        status: 3,
                        item_count: 10
                    },
                    success: function (res) {
                        //console.log(res);
                        res = JSON.parse(res);
                        if(res.errcode == 0) {
                            _this.totalPage = res.data.page_count;
                            _this.newsList = res.data.rank;
                            if(_this.newsList.length == 0) {
                                _this.nodata = true;
                            } else {
                                _this.nodata = false;
                            }
                            layui.use(['laypage', 'layer'], function(){
                                var laypage = layui.laypage;
                                layer = layui.layer;
                                laypage({
                                    cont: 'demo1',
                                    pages: vm.totalPage,
                                    groups: 5,
                                    jump: function(obj, first){
                                        var curr = obj.curr;
                                        $.ajax({
                                            type: 'POST',
                                            url: "jkxj.jsp",
                                            data: {
                                                act: "news_list",
                                                page: curr + "",
                                                category: "23",
                                                hospital: "1070",
                                                status: 3,
                                                item_count: 10
                                            },
                                            success: function(res) {
                                                //console.log(res);
                                                res = JSON.parse(res);
                                                $('.checkbox')[0].checked = false;
                                                vm.totalPage = res.data.page_count;
                                                vm.newsList = res.data.rank;
                                                if(vm.newsList.length == 0) {
                                                    vm.nodata = true;
                                                } else {
                                                    vm.nodata = false;
                                                }
                                            }
                                        })
                                    }
                                })
                            })
                        }

                    }
                })

            },
            pushedshow: function() {        //点击已推送，请求数据赋值给totalpage2和newsList2
                var _this = this;
                this.unpush = false;
                //console.log(this.status);
                //aa('demo2');
                $.ajax({
                    type: 'POST',
                    url: "jkxj.jsp",
                    data: {
                        act: "news_list",
                        category: "23",
                        hospital: "1070",
                        page: "1",
                        status: 1,
                        item_count: 10
                    },
                    success: function (res) {
                        //console.log(res);
                        res = JSON.parse(res);
                        if(res.errcode == 0) {
                            _this.totalPage2 = res.data.page_count;
                            _this.newsList2 = res.data.rank;
                            if(_this.newsList2.length == 0) {
                                _this.nodata = true;
                            } else {
                                _this.nodata = false;
                            }
                            layui.use(['laypage', 'layer'], function(){
                                var laypage = layui.laypage;
                                layer = layui.layer;
                                laypage({
                                    cont: 'demo2',
                                    pages: vm.totalPage2,
                                    groups: 5,
                                    jump: function(obj, first){
                                        var curr = obj.curr;
                                        $.ajax({
                                            type: 'POST',
                                            url: "jkxj.jsp",
                                            data: {
                                                act: "news_list",
                                                page: curr + "",
                                                category: "23",
                                                hospital: "1070",
                                                status: 1,
                                                item_count: 10
                                            },
                                            success: function(res) {
                                                //console.log(res);
                                                res = JSON.parse(res);
                                                $('.checkbox')[0].checked = false;
                                                vm.totalPage2 = res.data.page_count;
                                                vm.newsList2 = res.data.rank;
                                                if(vm.newsList2.length == 0) {
                                                    vm.nodata = true;
                                                } else {
                                                    vm.nodata = false;
                                                }
                                            }
                                        })
                                    }
                                })
                            })
                        }
                    }
                })

            },
            add: function() {       //添加新闻，切换各个盒子的显示状态
                this.addShow = true;
                this.listShow = false;
                this.editShow = false;
                this.nextPagelogo = true;
                this.childPage = "添加新闻";
                this.$broadcast('getCategory',this.category);
            },
            edit: function(id,index) {     //编辑新闻，请求数据并传递给编辑页面用于拼接
                var _this = this;
                var status;
                if(_this.unpush) {
                    status = 3;
                } else {
                    status = 1;
                }
                _this.addShow = false;
                _this.listShow = false;
                _this.editShow = true;
                _this.nextPagelogo = true;
                _this.childPage = "修改新闻";
                _this.newsId = id;
                _this.newsIndex = index;
                $.ajax({
                    type: 'POST',
                    url: "jkxj.jsp",
                    data: {
                        act: "news",
                        hospital: "1070",
                        news_id: _this.newsId,
                        status: status
                    },
                    success: function (res) {
                        res = JSON.parse(res);
                        _this.$broadcast('getMsg',res);
                    }
                })
                this.$broadcast('getId',this.newsId)
            },
            del: function(id,index) {         //删除新闻，传递id去删除页面
                this.delShow = true;
                this.newsIndex = index;
                this.$broadcast('delId',id);
            },
            back: function(id,index) {        //撤回新闻，传递id去删除页面
                this.backShow = true;
                this.$broadcast('getbackId',{id:id,index:index});
                this.backIndex = index;
            },
            push: function(id) {              //推送新闻，传递id去推送页面
                this.pushShow = true;
                this.$broadcast('getPushid',id);
            },
            selectAll: function() {           //全选功能
                var checkboxs = $('.checkbox');
                var ckslen = checkboxs.length;
                for(var i=0;i<ckslen;i++) {
                    if(checkboxs[i].type == 'checkbox') {
                        checkboxs[i].checked = checkboxs[0].checked;
                    }
                }
            },
            groupPush: function() {           //批量推送，传递参数去推送页面
                var newsidList = [];
                $(":checkbox[class='checkbox']:checked").each(function(){
                    newsidList.push($(this).attr('id'));
                });
                var newsidStr = newsidList.join(",");
                if(newsidStr == "") {
                    layer.open({
                        title: '提示',
                        content: '请至少选择一条新闻进行推送!'
                    })
                } else {
                    this.pushShow = true;
                    this.$broadcast('getPushid',newsidStr);
                }
            }
        },
        events: {
            showList: function(msg) {           //显示新闻列表，在修改完成之后，将修改页面传过来的参数在本页进行赋值
                //window.location.reload();
                this.addShow = false;
                this.listShow = true;
                this.editShow = false;
                this.childPage = "";
                this.nextPagelogo = false;

                if(this.unpush) {                                 //手动修改新闻标题
                    this.newsList[this.newsIndex].title = msg;
                } else {
                    this.newsList2[this.newsIndex].title = msg;
                }
            },
            addSucc: function() {             //添加新闻成功之后，请求已推送页面的数据
                //window.location.reload();
                this.addShow = false;
                this.listShow = true;
                this.childPage = "";
                this.nextPagelogo = false;
                var _this = this;
                this.unpush = false;
                $.ajax({
                    type: 'POST',
                    url: "jkxj.jsp",
                    data: {
                        act: "news_list",
                        category: "23",
                        hospital: "1070",
                        page: "1",
                        status: 1,
                        item_count: 10
                    },
                    success: function (res) {
                        //console.log(res);
                        res = JSON.parse(res);
                        if(res.errcode == 0) {
                            _this.totalPage2 = res.data.page_count;
                            _this.newsList2 = res.data.rank;
                            if(_this.newsList2.length == 0) {
                                _this.nodata = true;
                            } else {
                                _this.nodata = false;
                            }
                            layui.use(['laypage', 'layer'], function(){
                                var laypage = layui.laypage;
                                layer = layui.layer;
                                laypage({
                                    cont: 'demo2',
                                    pages: vm.totalPage2,
                                    groups: 5,
                                    jump: function(obj, first){
                                        var curr = obj.curr;
                                        $.ajax({
                                            type: 'POST',
                                            url: "jkxj.jsp",
                                            data: {
                                                act: "news_list",
                                                page: curr + "",
                                                category: "23",
                                                hospital: "1070",
                                                status: 1,
                                                item_count: 10
                                            },
                                            success: function(res) {
                                                //console.log(res);
                                                res = JSON.parse(res);
                                                $('.checkbox')[0].checked = false;
                                                vm.totalPage2 = res.data.page_count;
                                                vm.newsList2 = res.data.rank;
                                                if(vm.newsList2.length == 0) {
                                                    vm.nodata = true;
                                                } else {
                                                    vm.nodata = false;
                                                }
                                            }
                                        })
                                    }
                                })
                            })
                        }

                    }
                })
            },
            hideDel: function() {             //取消删除，关闭盒子，
                this.delShow = false;
                //this.newsList.splice(this.newsIndex,1)
            },
            delSuccess: function() {          //未推送列表(只有未推送有删除功能)，删除成功，关闭删除盒子，在页面上手动删除该条新闻
                this.delShow = false;
                this.newsList.splice(this.newsIndex,1);
                if(this.newsList.length == 0) {
                    window.location.reload();
                }
            },
            cancelBack: function() {          //取消撤回
                this.backShow = false;
            },
            succBack: function() {            //撤回成功（只有已发布有撤回功能）
                this.backShow = false;
                this.newsList2.splice(this.backIndex,1);
                if(this.newsList2.length == 0) {         //如果该页已经没有数据，则重新请求已发布页面的数据
                    var _this = this;
                    this.unpush = false;
                    $.ajax({
                        type: 'POST',
                        url: "jkxj.jsp",
                        data: {
                            act: "news_list",
                            category: "23",
                            hospital: "1070",
                            page: "1",
                            status: 1,
                            item_count: 10
                        },
                        success: function (res) {
                            //console.log(res);
                            res = JSON.parse(res);
                            if(res.errcode == 0) {
                                _this.totalPage2 = res.data.page_count;
                                _this.newsList2 = res.data.rank;
                                if(_this.newsList2.length == 0) {
                                    _this.nodata = true;
                                } else {
                                    _this.nodata = false;
                                }
                                layui.use(['laypage', 'layer'], function(){
                                    var laypage = layui.laypage;
                                    layer = layui.layer;
                                    laypage({
                                        cont: 'demo2',
                                        pages: vm.totalPage2,
                                        groups: 5,
                                        jump: function(obj, first){
                                            var curr = obj.curr;
                                            $.ajax({
                                                type: 'POST',
                                                url: "jkxj.jsp",
                                                data: {
                                                    act: "news_list",
                                                    page: curr + "",
                                                    category: "23",
                                                    hospital: "1070",
                                                    status: 1,
                                                    item_count: 10
                                                },
                                                success: function(res) {
                                                    //console.log(res);
                                                    res = JSON.parse(res);
                                                    $('.checkbox')[0].checked = false;
                                                    vm.totalPage2 = res.data.page_count;
                                                    vm.newsList2 = res.data.rank;
                                                    if(vm.newsList2.length == 0) {
                                                        vm.nodata = true;
                                                    } else {
                                                        vm.nodata = false;
                                                    }
                                                }
                                            })
                                        }
                                    })
                                })
                            }
                        }
                    })
                }
            },
            pushHide: function() {        //取消推送，关闭盒子
                this.pushShow = false;
            },
            succPush: function() {        //未发布新闻推送成功，直接刷新页面即可
                this.pushShow = false;
                window.location.reload();
            }
        },
        components: {
            addd: aaa,
            bbbb: bbb,
            dell: delNews,
            back: backNews,
            push: pushNews
        }
    })
</script>
<script src="../layui/layui.js"></script>